let user = JSON.parse($("#user").val() == null ? 0 : $("#user").val());
let token = $("#token").val();
var extHtml = '';
var friendUserId = "";

var websocket =null;
var date = "";
//判断当前浏览器是否支持websocket
if(window.WebSocket){
    websocket = new WebSocket(websocket_url);
    websocket.onopen = function () {
        console.log("建立连接");
    }
    websocket.onclose = function () {
        console.log("断开连接");
    }
    websocket.onmessage = function (e) {
        console.log("接收到服务器消息："+e.data.split("*&"));
        var name = e.data.split("*&")[0];
        date = e.data.split("*&")[1];
        var text = e.data.split("*&")[2];
        var userNick = e.data.split("*&")[3];
        var headUrl = e.data.split("*&")[4];

        var chatAll = $("#chatAll");
        var chatOp = "";
        if(user.nick_name == userNick){
            chatOp = '<div class="cright cmsg">';
        }else{
            chatOp =  '<div class="cleft cmsg">';
        }

        chatAll.append('' +
            '    <div class="tips">'+date+'</div>'+
            chatOp+
            '        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="'+headUrl+'" />\n' +
            '        <span class="name">'+userNick+'</span>\n' +
            '        <span class="content">'+text+'</span>\n' +
            '    </div>');
    }
} else {
    alert("当前浏览器不支持webSocket");
}

//检测是否有登录
if(user =="null" || user  == undefined){
    layer.alert("请重新登录",function () {
        location.href = base_url+'login.html';
    });
}

layui.use('layer', function(){ //独立版的layer无需执行这一句
    var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
});

function checkLevel() {
    if(user.level_id<6){
        layer.alert("您的级别不够！请努力提升");
        return false;
    }
    return true;
}

//关闭所有弹框
function closeIndex(num) {
    var index =layer.index;
    if(index>1){
        layer.close(index+1);
    }
    if(num!=null){
        layer.close(index-1);
    }
    layer.closeAll();
}

//仙宗商店展示
function shop() {
    layer.open({
        type: 1
        ,title: '仙宗商店' //不显示标题栏
        ,closeBtn: false
        ,area: '700px;'
        ,shade: 0.5
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        ,btn: ['关闭']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' +
            '<span>' +
            '<div id="shop" class="layui-tab layui-tab-card">\n' +
            '  <ul class="layui-tab-title">\n' +
            '    <li class="layui-this">丹药</li>\n' +
            '    <li>功法</li>\n' +
            '    <li>装备</li>\n' +
            '    <li>宠物</li>\n' +
            '    <li>坐骑</li>\n' +
            '    <li>套餐</li>\n' +
            '  </ul>\n' +
            '  <div class="layui-tab-content" style="height: 400px;">\n' +
            '    <div class="layui-tab-item layui-show">' +
            '<table class="layui-table">\n' +
            '  <colgroup>\n' +
            '    <col width="150">\n' +
            '    <col width="200">\n' +
            '    <col>\n' +
            '  </colgroup>\n' +
            '  <thead>\n' +
            '    <tr>\n' +
            '      <th>名称</th>\n' +
            '      <th>描述</th>\n' +
            '      <th>价格</th>\n' +
            '    </tr> \n' +
            '  </thead>\n' +
            '  <tbody>\n' +
            '    <tr onclick="shopping()">\n' +
            '      <td>大力丸</td>\n' +
            '      <td>攻击+50</td>\n' +
            '      <td>16000</td>\n' +
            '    </tr>\n' +
            '    <tr onclick="shopping()">\n' +
            '      <td>净心丸</td>\n' +
            '      <td>经验+100000</td>\n' +
            '      <td>900</td>\n' +
            '    </tr>\n' +
            '    <tr onclick="shopping()">\n' +
            '      <td>剑心真丹</td>\n' +
            '      <td>攻击+18000</td>\n' +
            '      <td>1960500</td>\n' +
            '    </tr>\n' +
            '    <tr onclick="shopping()">\n' +
            '      <td>绝品九转真丹</td>\n' +
            '      <td>气血+80000</td>\n' +
            '      <td>1240010</td>\n' +
            '    </tr>\n' +
            '  </tbody>\n' +
            '</table>' +
            '</div>\n' +
            '    <div class="layui-tab-item">缺货</div>\n' +
            '    <div class="layui-tab-item">缺货</div>\n' +
            '    <div class="layui-tab-item">缺货</div>\n' +
            '    <div class="layui-tab-item">缺货</div>\n' +
            '    <div class="layui-tab-item">缺货</div>\n' +
            '  </div>\n' +
            '</div>' +
            '</span><br/>'+
            '<br/><button type="button" onclick="" class="layui-btn layui-btn-normal">升级</button>' +
            '<button type="button" onclick="" class="layui-btn layui-btn-normal">装备精修</button>' +
            '<button type="button" onclick="" class="layui-btn layui-btn-normal">悟道</button>' +
            '<button type="button" onclick="" class="layui-btn layui-btn-normal">闭关</button>'+
            '</div></center>'
        ,success: function(layero){

        }
    });
}
//购物
function shopping() {
    layer.open({
        type: 1
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: '300px;'
        ,shade: 0.8
        ,id: 'LAY_layuipro22' //设定一个id，防止重复弹出
        ,btn: ['关闭']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' +
            '<center><span>购买数量：&nbsp;&nbsp;<input type="number" class="layui-input"></span><br/><br/>'+
            '<button type="button" onclick="shops()" class="layui-btn layui-btn-normal">购买</button>'+
            '</div></center>'
    });
}

function shops() {
    layer.alert("没钱买个得???");
}

//背包物品操作
function knapsackOperation() {
    layer.open({
        type: 1
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: '350px;'
        ,shade: 0.8
        ,id: 'LAY_layuipro22' //设定一个id，防止重复弹出
        ,btn: ['关闭']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 350;">' +
            '<span><button type="button" onclick="" class="layui-btn layui-btn-normal">使用</button></span>&nbsp;&nbsp;&nbsp;'+
            '<span><button type="button" onclick="" class="layui-btn layui-btn-normal">丢弃</button></span>&nbsp;&nbsp;&nbsp;'+
            '<span><button type="button" onclick="" class="layui-btn layui-btn-normal">赠送</button></span>'+
            '</div></center>'
    });
}

//同步数据
function loding() {

    layer.open({
        type: 1
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: '300px;'
        ,shade: 0.8
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        ,btn: ['关闭']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' +
            '<span>密码:<input id="ps" class="layui-input" type="password"/></span><br/>'+
            '<br/><button type="button" onclick="lodingLogin()" class="layui-btn layui-btn-normal">同步</button>'+
            '</div></center>'
        ,success: function(layero){

        }
    });

}

function lodingLogin(){

    var ps = $("#ps").val();

    //调用ajax
    var settings = {
        "url": base_url+"/api/base?action=login&userName="+user.user_name+"&passWord="+ps,
        "method": "GET",
        "timeout": 0,
    };

    $(function () {
        $.ajax(settings).done(function (response) {
            console.log(response);
            if(response.code == 403){
                layer.alert(response.message);
            }else if(response.code == 200){
                sessionStorage.setItem("user","");
                sessionStorage.setItem("user",JSON.stringify(response));
                layer.alert("同步成功");
            }else{
                layer.alert("服务器开小差...");
            }

        });
    })
}

//人物
function character(){

    //user = JSON.parse($("#user").val());
    layer.open({
        type: 1
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: '300px;'
        ,shade: 0.8
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        ,btn: ['查看人物', '关闭人物']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div id="character" style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' +
            '<div>头像:</div><span><img width="50" height="50" src="'+user.head_url+'" alt=""/></span><br/>'+
            '<div>昵称:</div><span>'+user.nick_name+'</span><br/>'+
            '<div>级别:</div><img style="width: 30px;height: 30px" src="'+user.level_icon+'"/><span>'+user.level_name+'</span><br/>'+
            '<div>用户名:</div><span>'+user.user_name+'</span><br/>'+
            '<div>血量:</div><span>'+user.character_hp+'/'+user.character_hp+'</span><br/>'+
            '<div>蓝量:</div><span>'+user.character_mp+'/'+user.character_mp+'</span><br/>'+
            '<div>怒气:</div><span>'+user.character_re+'/'+user.character_re+'</span><br/>'+
            '<div>攻击:</div><span>'+user.aggressivity+'</span><br/>'+
            '<div>防御:</div><span>'+user.defense+'</span><br/>'+
            '<div>灵石:</div><span>'+user.pay_stone+'</span><br/>'+
            '<div>经验:</div><span>'+user.experience_num+'/'+user.ec_required+'</span>'+
            '<div>进度条:</div><span>' +
            '<div class="layui-progress" lay-filter="demo" lay-showPercent="yes">\n' +
            '  <div class="layui-progress-bar layui-bg-green" lay-percent="30%"></div>\n' +
            '</div>' +
            '</span>'+
            '</div>'
        ,success: function(layero){

            var percent = parseInt(user.experience_num)/parseInt(user.ec_required)*100;

            element.progress("demo",percent+'%');
        }
    });
}
//仓库
function house(){

    if(!checkLevel()){
        return false;
    }

//layer.msg("暂未开发");
    layer.open({
        type: 1
        ,title: '我的仓库' //不显示标题栏
        ,closeBtn: false
        ,area: '680px;'
        ,shade: 0.8
        ,anim:1
        , offset: ['10%','35%']//设置位移
        ,id: 'house' //设定一个id，防止重复弹出
        ,btn: ['我的仓库', '拓展仓库']
        ,btnAlign: 'c'
        ,moveType: 0 //拖拽模式，0或者1
        ,content: '<div style="padding: 20px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 560;">' +
            '<table id="houseTable" class="layui-table">' +
            '  <colgroup>\n' +
            '    <col width="20">\n' +
            '    <col>\n' +
            '  </colgroup>\n' +
            '  <thead>\n' +
            '    <tr>\n' +
            '      <th>1</th>\n' +
            '      <th>2</th>\n' +
            '      <th>3</th>\n' +
            '      <th>4</th>\n' +
            '      <th>5</th>\n' +
            '      <th>6</th>\n' +
            '      <th>7</th>\n' +
            '      <th>8</th>\n' +
            '      <th>9</th>\n' +
            '    </tr> \n' +
            '  </thead>\n' +
            '  <tbody id="houses">\n' +
            '  </tbody>'+
            '</table>'+
            '<center><div id="housesPage"></div></center>' +
            '</div>'
        ,success: function(layero){
            //分页
            laypage.render({
                elem: "housesPage" //分页容器的id
                ,count: 50 //数据总数
                ,curr: 1//每页显示的数据条数
                ,limit:10
                ,skin: '#FFD700' //自定义选中色值
                ,jump: function(obj, first){
                    if(!first){
                        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                    }
                }
            });
        }
    });

    var houses = $("#houses");
    houses.html("");
    for (var i = 0; i < 6 ; i++) {
        houses.append(  ' <tr>\n' +
            '      <td onclick="knapsackOperation()">贤心丹x10</td>\n' +
            '      <td onclick="knapsackOperation()">真剑丸x26</td>\n' +
            '      <td onclick="knapsackOperation()">百家皮囊x11</td>\n' +
            '      <td onclick="knapsackOperation()">护身符x23</td>\n' +
            '      <td onclick="knapsackOperation()">大道至简(初级)x16</td>\n' +
            '      <td onclick="knapsackOperation()">李石仙人语录</td>\n' +
            '      <td onclick="knapsackOperation()">东乾刀x4</td>\n' +
            '      <td onclick="knapsackOperation()">烈阳袍x9</td>\n' +
            '      <td onclick="knapsackOperation()">踏浪靴x5</td>\n' +
            '    </tr>\n');
    }
}
//背包
function knapsack(){
 //layer.msg("暂未开发");
    layer.open({
        type: 1
        ,title: '我的背包' //不显示标题栏
        ,closeBtn: false
        ,area: '680px;'
        ,shade: 0.8
        ,anim:1
        , offset: ['10%','35%']//设置位移
        ,id: 'knapsack' //设定一个id，防止重复弹出
        ,btn: ['我的背包', '拓展背包']
        ,btnAlign: 'c'
        ,moveType: 0 //拖拽模式，0或者1
        ,content: '<div style="padding: 20px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 560;">' +
            '<table id="knapsackTable" class="layui-table">' +
            '  <colgroup>\n' +
            '    <col width="20">\n' +
            '    <col>\n' +
            '  </colgroup>\n' +
            '  <thead>\n' +
            '    <tr>\n' +
            '      <th>1</th>\n' +
            '      <th>2</th>\n' +
            '      <th>3</th>\n' +
            '      <th>4</th>\n' +
            '      <th>5</th>\n' +
            '      <th>6</th>\n' +
            '      <th>7</th>\n' +
            '      <th>8</th>\n' +
            '      <th>9</th>\n' +
            '    </tr> \n' +
            '  </thead>\n' +
            '  <tbody id="knapsacks">\n' +
            '  </tbody>'+
            '</table>'+
            '<center><div id="knapsackPage"></div></center>'+
            '</div>'
        ,success: function(layero){
            //分页
            laypage.render({
                elem: "knapsackPage" //分页容器的id
                ,count: 100 //数据总数
                ,curr: 1//每页显示的数据条数
                ,limit:10
                ,skin: '#1E9FFF' //自定义选中色值
                ,jump: function(obj, first){
                    if(!first){

                    }
                }
            });
        }
    });

    var knapsacks = $("#knapsacks");
    knapsacks.html("");
    for (var i = 0; i < 6 ; i++) {
        knapsacks.append(  ' <tr>\n' +
            '      <td onclick="knapsackOperation()">贤心丹x10</td>\n' +
            '      <td onclick="knapsackOperation()">真剑丸x26</td>\n' +
            '      <td onclick="knapsackOperation()">百家皮囊x11</td>\n' +
            '      <td onclick="knapsackOperation()">护身符x23</td>\n' +
            '      <td onclick="knapsackOperation()">大道至简(初级)x16</td>\n' +
            '      <td onclick="knapsackOperation()">李石仙人语录</td>\n' +
            '      <td onclick="knapsackOperation()">东乾刀x4</td>\n' +
            '      <td onclick="knapsackOperation()">烈阳袍x9</td>\n' +
            '      <td onclick="knapsackOperation()">踏浪靴x5</td>\n' +
            '    </tr>\n');
    }


}
//任务列表
function task() {
    var trs = ["任务封面","任务名称","任务类型","任务级别","任务详情","任务奖励","任务进度","任务状态"];

    extHtml = '';

    page(1,7,"queryTaskList","任务列表","890","67",trs,"ceshi","ceshipage",1,extHtml);
}
//邮箱列表
function email(){
    var trs = ["发件人","发件时间","邮件内容","邮件附件","阅读状态"];

    extHtml = '';

    page(1,10,"getEmailInfo","邮箱列表","890","68",trs,"email","emailpage",2,extHtml);
}
//功法列表
function showGoogfa(){
    var trs = ["功法图标","功法名称","功法类型","功法级别","功法详情"];

    extHtml = '';

    page(1,7,"gongfaList","功法列表","1000","69",trs,"gongfa","gongfapage",3,extHtml);
}
//宠物列表
function pets(){

    if(!checkLevel()){
        return false;
    }

    extHtml = '';

    var trs = ["宠物图标","宠物名称","宠物类型","宠物品质","宠物级别","宠物详情","宠物详细信息"];
    page(1,7,"queryUserPetsList","宠物列表","1000","70",trs,"pets","petspage",4,extHtml);

}
//骑宠列表
function mount(current){

    if(!checkLevel()){
        return false;
    }
    extHtml = '';
    var trs = ["骑宠图标","骑宠名称","骑宠类型","骑宠品质","骑宠级别","骑宠详情","骑宠详细信息"];
    page(1,7,"queryUserMountList","骑宠列表","1000","71",trs,"mount","mountpage",5,extHtml);

}
//朋友列表
function friends(){

    var trs = ["头像","昵称","级别","用户名","亲密度","关系","操作"];
    extHtml = '<button type="button" class="layui-btn layui-btn-normal" onclick="addFriend()">添加好友</button>' +
        '<button type="button" class="layui-btn layui-btn-normal" onclick="msgInfo()">消息栏</button>';
    page(1,9,"friendList","朋友列表","1600","76",trs,"friends","friendspage",6,extHtml);

}

//消息栏
function msgInfo() {
    extHtml = "";
    var trs = ["申请人昵称","申请人级别","申请人关系","申请内容","申请状态","申请时间","操作"];
    page(1,6,"queryFriendApplicantList","朋友申请消息","400","99",trs,"friendApplicant","friendApplicantPage"
        ,7,extHtml
    )
}

//列表通用模板方法
function page(current,size,action,title,area,openMsgId,trs,tbodyName,pageName,state,extHtml) {


    if(current!=null){
        current = current;
    }

    //调用ajax
    var settings = {
        "url": base_url+"/api/base?action="+action+"&current="+current+"&size="+size,
        "method": "GET",
        "timeout": 0,
        "headers": {
            "token": token
        }
    };

    $(function () {
        $.ajax(settings).done(function (response) {
            console.log(response);
            if(response.code == 403){
                layer.alert(response.message);
            }else if(response.code == 200){

                layer.open({
                    type: 1
                    ,title: title //不显示标题栏
                    ,closeBtn: false
                    ,area: [area+'px']
                    ,shade: 1.2
                    ,id: 'openMsg'+openMsgId //设定一个id，防止重复弹出
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: '<div id="test" style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 500;">' +
                        '<div id="shop" class="layui-tab layui-tab-card">\n' +
                        '  <div class="layui-tab-content" style="height: 700px;">\n' +
                        '    <div class="layui-tab-item layui-show">' +
                        '<table class="layui-table">\n' +
                        '  <colgroup>\n' +
                        '    <col width="150">\n' +
                        '    <col width="200">\n' +
                        '    <col>\n' +
                        '  </colgroup>\n' +
                        '  <thead>\n' +
                        '    <tr id="trth">\n' +
                        '    </tr> \n' +
                        '  </thead>\n' +
                        '  <tbody id="'+tbodyName+'">\n' +
                        '</tbody>' +
                        '</table></div> ' +
                        '</div></div>' +
                        '<center>' +
                        '<div id="'+pageName+'"></div>' +
                        extHtml+
                        '<button type="button" class="layui-btn layui-btn-normal" onclick="closeIndex()">关闭弹框</button></center>' +
                        '</div>\n' +
                        '</div>'
                    ,success: function(layero){
                        //分页
                        laypage.render({
                            elem: pageName //分页容器的id
                            ,count: response.data.total //数据总数
                            ,curr: response.data.current //每页显示的数据条数
                            ,limit:response.data.size
                            ,skin: '#1E9FFF' //自定义选中色值
                            ,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
                            ,jump: function(obj, first){
                                if(!first){
                                    page(obj.curr,size,action,title,area,openMsgId,trs,tbodyName,pageName,state,extHtml);
                                }
                            }
                        });
                    }
                });

                ;
                $("#trth").html("")
                for (var i = 0; i <trs.length ; i++) {
                    $("#trth").append("<th>"+trs[i]+"</th>");
                }

                var records = response.data.records;
                var toboby =  $("#"+tbodyName);
                toboby.html("");


               switch (state) {
                    //任务列表
                   case 1:
                       var taskState = '';
                       //渲染数据
                       for (var i = 0; i < records.length; i++) {

                           if(records[i].task_state == 1){
                               taskState = '已接取'
                           }else if(records[i].task_state == 2) {
                               taskState = '已完成'
                           }else{
                               taskState = '未接取'
                           }

                           toboby.append('    <tr onclick="">\n' +
                               '      <td><img width="120" height="50" src="'+records[i].task_img+'"/></td>\n' +
                               '      <td>'+records[i].task_name+'</td>\n' +
                               '      <td>'+records[i].type_name+'</td>\n' +
                               '      <td><img width="50" height="50" src="'+records[i].level_icon+'" /> '+records[i].level_name+'</td>\n' +
                               '      <td>'+records[i].task_details+'</td>\n' +
                               '      <td>'+records[i].task_reward+'</td>\n' +
                               '      <td>'+records[i].task_progress+'</td>\n' +
                               '      <td>'+taskState+'</td>\n' +
                               '    </tr>');
                       }
                       break;
                   //邮箱列表
                   case 2:
                       for (var i = 0; i < records.length; i++) {

                           var isRead = records[i].isRead;
                           if(isRead==0){
                               isRead = "未阅读";
                           }else{
                               isRead = "已阅读";
                           }

                           toboby.append('    <tr onclick="">\n' +
                               '      <td>'+records[i].sendNickName+'</td>\n' +
                               '      <td>'+records[i].emailTime+'</td>\n' +
                               '      <td>'+records[i].emailContext+'</td>\n' +
                               '      <td>'+records[i].emailEnclosure+'</td>\n' +
                               '      <td>'+isRead+'</td>\n' +
                               '    </tr>');
                       }
                       break;
                    //功法列表
                   case 3:
                       var googfaType = "";
                       for (var i = 0; i < records.length; i++) {

                           if(records[i].googfa_type == 1){
                               googfaType = '攻击类'
                           }else if(records[i].googfa_type == 2) {
                               googfaType = '防御类'
                           }else{
                               googfaType = '综合类'
                           }

                           toboby.append('    <tr onclick="">\n' +
                               '      <td><img src="'+records[i].googfa_icon+'"/></td>\n' +
                               '      <td>'+records[i].googfa_name+'</td>\n' +
                               '      <td>'+googfaType+'</td>\n' +
                               '      <td>'+records[i].googfa_grade+'</td>\n' +
                               '      <td>'+records[i].googfa_details+'</td>\n' +
                               '    </tr>');
                       }
                       break;
                   //宠物列表
                   case 4:
                       var qualityType = '';

                       for (var i = 0; i < records.length; i++) {

                           if(records[i].quality == 1){
                               qualityType = '<td><p style="color: white">普通</p></td>>'
                           }else if(records[i].quality == 2) {
                               qualityType = '<td><p style="color: green">优秀</p></td>'
                           }else if(records[i].quality == 3) {
                               qualityType = '<td><p style="color: #B5FFF8">杰出</p></td>'
                           }else if(records[i].quality == 4) {
                               qualityType = '<td><p style="color: orchid">卓越</p></td>'
                           }else if(records[i].quality == 5) {
                               qualityType = '<td><p style="color: #FFFF00">完美</p></td>'
                           }else if(records[i].quality == 6) {
                               qualityType = '<td><p style="color: crimson">超凡</p></td>'
                           }else if(records[i].quality == 7) {
                               qualityType = '<td><p style="color: lightcoral">顶尖</p></td>'
                           }


                           toboby.append('    <tr onclick="">\n' +
                               '      <td><img width="150" height="115" src="'+records[i].pets_icon+'"/></td>\n' +
                               '      <td>'+records[i].pets_name+'</td>\n' +
                               '      <td><p style="color: red">'+records[i].type_name+'</p></td>\n' +
                               qualityType+
                               '      <td width="50"><p style="color: white">Lv'+records[i].level+'</p></td>\n' +
                               '      <td>'+records[i].pets_details+'</td>\n' +
                               '      <td>' +
                               '      <button type="button" class="layui-btn layui-btn-normal" onclick="queryPetsInfo('+records[i].hp+','+records[i].mp+','+records[i].aggressivity+','+
                               records[i].defense+','+records[i].intimacy+','+records[i].experience_num
                               +')">查看详细数据</button><br/><br/>'+
                               '      <button type="button" class="layui-btn layui-btn-normal" onclick="queryPetsSkillInfo('+records[i].id+',1)">查看技能数据</button>' +
                               '     </td>\n' +
                               '    </tr>');
                       }
                       break;
                   //坐骑列表
                   case 5:
                       var qualityType = '';
                       for (var i = 0; i < records.length; i++) {

                           if(records[i].quality == 1){
                               qualityType = '<td><p style="color: white">普通</p></td>>'
                           }else if(records[i].quality == 2) {
                               qualityType = '<td><p style="color: green">优秀</p></td>'
                           }else if(records[i].quality == 3) {
                               qualityType = '<td><p style="color: #B5FFF8">杰出</p></td>'
                           }else if(records[i].quality == 4) {
                               qualityType = '<td><p style="color: orchid">卓越</p></td>'
                           }else if(records[i].quality == 5) {
                               qualityType = '<td><p style="color: #FFFF00">完美</p></td>'
                           }else if(records[i].quality == 6) {
                               qualityType = '<td><p style="color: crimson">超凡</p></td>'
                           }else if(records[i].quality == 7) {
                               qualityType = '<td><p style="color: lightcoral">顶尖</p></td>'
                           }


                           toboby.append('    <tr onclick="">\n' +
                               '      <td><img width="150" height="115" src="'+records[i].mount_icon+'"/></td>\n' +
                               '      <td>'+records[i].mount_name+'</td>\n' +
                               '      <td><p style="color: red">'+records[i].type_name+'</p></td>\n' +
                               qualityType+
                               '      <td width="50"><p style="color: white">Lv'+records[i].level+'</p></td>\n' +
                               '      <td>'+records[i].mount_details+'</td>\n' +
                               '      <td>' +
                               '      <button type="button" class="layui-btn layui-btn-normal" onclick="queryPetsInfo('+records[i].hp+','+records[i].mp+','+records[i].aggressivity+','+
                               records[i].defense+','+records[i].intimacy+','+records[i].experience_num
                               +')">查看详细数据</button><br/><br/>'+
                               '      <button type="button" class="layui-btn layui-btn-normal" onclick="queryMountSkillInfo('+records[i].id+',1)">查看技能数据</button>' +
                               '     </td>\n' +
                               '    </tr>');
                       }
                       break;
                   //朋友列表
                   case 6:
                       for (var i = 0; i < records.length; i++) {
                           var nickName = records[i].nick_name;
                           var headUrl = records[i].head_url;
                           friendUserId = records[i].friend_id;
                           localStorage.setItem(records[i].friend_id,nickName+"*"+headUrl);
                           toboby.append('    <tr onclick="">\n' +
                               '      <td><img width="50" height="50" src="'+headUrl+'"/></td>\n' +
                               '      <td>'+nickName+'</td>\n' +
                               '      <td><img width="20" height="20" src="'+records[i].level_icon+'" />'+records[i].level_name+'</td>\n' +
                               '      <td>'+records[i].user_name+'</td>\n' +
                               '      <td>'+records[i].intimacy+'</td>\n' +
                               '      <td>'+records[i].relationship+'</td>\n' +
                               '<td>' +
                               '<center>' +
                               '<a class="layui-btn  layui-btn-xs" onclick="pk('+records[i].friend_id+')">好友PK</a> '+
                               '<a class="layui-btn  layui-btn-xs" onclick="chat('+records[i].friend_id+')">聊天</a>' +
                               '<a class="layui-btn  layui-btn-xs" onclick="sendEmail('+records[i].friend_id+')">发邮件</a>' +
                               '<a class="layui-btn  layui-btn-xs" onclick="info('+records[i].friend_id+')">查看好友信息</a> '+
                               '</center>' +
                               '  </td></tr>');
                       }
                       break;
                   //查看朋友消息列表
                   case 7:
                       var stateValue = "";

                       for (var i = 0; i < records.length; i++) {
                           var states = records[i].state;
                           if(states==0){
                               stateValue = "已提交";
                           }else if(states==1){
                               stateValue = "已通过";
                           }else if(states==2){
                               stateValue = "已拒绝";
                           }

                           toboby.append('    <tr onclick="">\n' +
                               '      <td>'+records[i].nickName+'</td>\n' +
                               '      <td>'+records[i].levelName+'</td>\n' +
                               '      <td>'+records[i].relationship+'</td>\n' +
                               '      <td>'+records[i].applicantContext+'</td>\n' +
                               '      <td>'+stateValue+'</td>\n' +
                               '      <td>'+records[i].createTime+'</td>\n' +
                               '<td>' +
                               '<center>' +
                               '<a class="layui-btn  layui-btn-xs" onclick="audit('+records[i].friend_id+')">同意</a>' +
                               '<a class="layui-btn  layui-btn-xs " onclick="audit('+records[i].friend_id+')">拒绝</a>' +
                               '<a class="layui-btn  layui-btn-xs" onclick="delMsg('+records[i].friend_id+')">删除信息</a> '+
                               '</center>' +
                               '  </td></tr>');
                       }
                       break;
               }

            }else{
                layer.alert("服务器开小差...");
            }

        });
    })

}

//---------------------------以上为主方法----------
//---------------------------以下为子方法----------

//查询宠物详细信息
function queryPetsInfo(hp,mp,aggressivity,defense,intimacy,experience_num) {

    layer.open({
        type: 1
        ,title: "宠物详细信息" //不显示标题栏
        ,closeBtn: false
        ,area: '300px;'
        ,shade: 0.8
        ,id: 'LAY_layuipro68' //设定一个id，防止重复弹出
        ,btn: ['关闭']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div id="petsInfo" style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' +
            '<div>血量:</div><span>'+hp+'/'+hp+'</span><br/>'+
            '<div>蓝量:</div><span>'+mp+'/'+mp+'</span><br/>'+
            '<div>攻击:</div><span>'+aggressivity+'</span><br/>'+
            '<div>防御:</div><span>'+defense+'</span><br/>'+
            '<div>亲密度:</div><span>'+intimacy+'</span><br/>'+
            '<div>经验:</div><span>'+experience_num+'/'+1000+'</span>'+
            '<div>进度条:</div><span>' +
            '<div class="layui-progress" lay-filter="demo" lay-showPercent="yes">\n' +
            '  <div class="layui-progress-bar layui-bg-green" lay-percent="30%"></div>\n' +
            '</div>' +
            '</span>'+
            '</div>'
        ,success: function(layero){
            var percent = (parseInt(experience_num)/1000 )*100;
            element.progress("demo",percent+'%');
        }
    });
}

//查询宠物技能信息
function queryPetsSkillInfo(id,current) {
    if(current!=null){
        current = current;
    }

    //调用ajax
    var settings = {
        "url": base_url+"/api/base?action=queryUserPetsSkillList&current="+current+"&size=7&userPetsId="+id,
        "method": "GET",
        "timeout": 0,
        "headers": {
            "token": token
        }
    };

    $(function () {
        $.ajax(settings).done(function (response) {
            console.log(response);
            if(response.code == 403){
                layer.alert(response.message);
            }else if(response.code == 200){
                
                sessionStorage.setItem("userPetsSkillList","");
                sessionStorage.setItem("userPetsSkillList",JSON.stringify(response));

                layer.open({
                    type: 1
                    ,title: "宠物技能列表" //不显示标题栏
                    ,closeBtn: false
                    ,area: '600px;'
                    ,shade: 1.2
                    ,id: 'LAY_layuipro33' //设定一个id，防止重复弹出
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: '<div id="gongfa" style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 500;">' +
                        '<div id="shop" class="layui-tab layui-tab-card">\n' +
                        '  <div class="layui-tab-content" style="height: 700px;">\n' +
                        '    <div class="layui-tab-item layui-show">' +
                        '<table class="layui-table">\n' +
                        '  <colgroup>\n' +
                        '    <col width="150">\n' +
                        '    <col width="200">\n' +
                        '    <col>\n' +
                        '  </colgroup>\n' +
                        '  <thead>\n' +
                        '    <tr>\n' +
                        '      <th>宠物技能图标</th>\n' +
                        '      <th>宠物技能名称</th>\n' +
                        '      <th>宠物技能级别</th>\n' +
                        '      <th>宠物技能等级</th>\n' +
                        '      <th>宠物技能详情</th>\n' +
                        '    </tr> \n' +
                        '  </thead>\n' +
                        '  <tbody id="userPetsSkills">\n' +
                        '</tbody>' +
                        '</table></div> ' +
                        '</div></div>' +
                        '<center>' +
                        '<div id="pageUserPetsSkills"></div>' +
                        '<button type="button" class="layui-btn layui-btn-normal" onclick="closeIndex()">关闭弹框</button></center>' +
                        '</div>\n' +
                        '</div>'
                    ,success: function(layero){
                        //分页
                        laypage.render({
                            elem: 'pageUserPetsSkills' //分页容器的id
                            ,count: response.data.total //数据总数
                            ,curr: response.data.current //每页显示的数据条数
                            ,limit:response.data.size
                            ,skin: '#1E9FFF' //自定义选中色值
                            ,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
                            ,jump: function(obj, first){
                                if(!first){
                                    
                                    queryPetsSkillInfo(id,obj.curr);
                                    //layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                                }
                            }
                        });
                    }
                });


                //渲染数据
                var records = response.data.records;
                $("#userPetsSkills").html("");
                for (var i = 0; i < records.length; i++) {


                    $("#userPetsSkills").append('    <tr onclick="">\n' +
                        '      <td><img width="50" height="50" src="'+records[i].skill_icon+'"/></td>\n' +
                        '      <td>'+records[i].skill_name+'</td>\n' +
                        '      <td><p style="color: red">'+records[i].sk_skill_level+'</p></td>\n' +
                        '      <td width="50"><p style="color: white">'+records[i].skill_level+'级</p></td>\n' +
                        '      <td>'+records[i].skill_details+'</td>\n' +
                        '    </tr>');
                }

            }else{
                layer.alert("服务器开小差...");
            }

        });
    })
}

//查询骑宠技能信息
function queryMountSkillInfo(id,current) {
    if(current!=null){
        current = current;
    }

    //调用ajax
    var settings = {
        "url": base_url+"/api/base?action=queryUserMountSKillList&current="+current+"&size=7&userMountId="+id,
        "method": "GET",
        "timeout": 0,
        "headers": {
            "token": token
        }
    };

    $(function () {
        $.ajax(settings).done(function (response) {
            console.log(response);
            if(response.code == 403){
                layer.alert(response.message);
            }else if(response.code == 200){

                layer.open({
                    type: 1
                    ,title: "骑宠技能列表" //不显示标题栏
                    ,closeBtn: false
                    ,area: '600px;'
                    ,shade: 1.2
                    ,id: 'LAY_layuipro36' //设定一个id，防止重复弹出
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: '<div id="userMountSkill" style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 500;">' +
                        '<div id="shop" class="layui-tab layui-tab-card">\n' +
                        '  <div class="layui-tab-content" style="height: 700px;">\n' +
                        '    <div class="layui-tab-item layui-show">' +
                        '<table class="layui-table">\n' +
                        '  <colgroup>\n' +
                        '    <col width="150">\n' +
                        '    <col width="200">\n' +
                        '    <col>\n' +
                        '  </colgroup>\n' +
                        '  <thead>\n' +
                        '    <tr>\n' +
                        '      <th>骑宠技能图标</th>\n' +
                        '      <th>骑宠技能名称</th>\n' +
                        '      <th>骑宠技能级别</th>\n' +
                        '      <th>骑宠技能等级</th>\n' +
                        '      <th>骑宠技能详情</th>\n' +
                        '    </tr> \n' +
                        '  </thead>\n' +
                        '  <tbody id="userMountSkills">\n' +
                        '</tbody>' +
                        '</table></div> ' +
                        '</div></div>' +
                        '<center>' +
                        '<div id="pageUserMountSkills"></div>' +
                        '<button type="button" class="layui-btn layui-btn-normal" onclick="closeIndex()">关闭弹框</button></center>' +
                        '</div>\n' +
                        '</div>'
                    ,success: function(layero){
                        //分页
                        laypage.render({
                            elem: 'pageUserMountSkills' //分页容器的id
                            ,count: response.data.total //数据总数
                            ,curr: response.data.current //每页显示的数据条数
                            ,limit:response.data.size
                            ,skin: '#1E9FFF' //自定义选中色值
                            ,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
                            ,jump: function(obj, first){
                                if(!first){
                                    
                                    queryMountSkillInfo(id,obj.curr);
                                    //layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                                }
                            }
                        });
                    }
                });


                //渲染数据
                var records = response.data.records;
                $("#userMountSkills").html("");
                for (var i = 0; i < records.length; i++) {


                    $("#userMountSkills").append('    <tr onclick="">\n' +
                        '      <td><img width="50" height="50" src="'+records[i].skill_icon+'"/></td>\n' +
                        '      <td>'+records[i].skill_name+'</td>\n' +
                        '      <td><p style="color: red">'+records[i].sk_skill_level+'</p></td>\n' +
                        '      <td width="50"><p style="color: white">'+records[i].skill_level+'级</p></td>\n' +
                        '      <td>'+records[i].skill_details+'</td>\n' +
                        '    </tr>');
                }

            }else{
                layer.alert("服务器开小差...");
            }

        });
    })
}


//添加好友
function addFriend(friendUserId) {
    layer.open({
        type: 1
        ,title: "添加朋友" //不显示标题栏
        ,closeBtn: false
        ,area: '300px;'
        ,shade: 0.8
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        ,btn: ['关闭']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' +
            '<span>昵称:<input id="nk" class="layui-input" type="text"/></span><br/>'+
            '<span>关系:' +
            ' <select style="width: 200px;" name="" id="relationship" >\n' +
            '            <option value="朋友">朋友</option>\n' +
            '            <option value="结义">结义</option>\n' +
            '            <option value="帮派">帮派</option>\n' +
            '            <option value="密友">密友</option>\n' +
            '            <option value="师徒">师徒</option>\n' +
            '            <option value="道侣">道侣</option>\\n\' +'+
            '        </select>' +
            '</span><br/>'+
            '<br/>' +
            '<span>' +
            '<textarea id="applicantContext" placeholder="请输入申请内容" class="layui-textarea">' +
            '</textarea>' +
            '</span>' +
            '<br/>'+
            '<center>' +
            '<button type="button" onclick="queryFiren()" class="layui-btn layui-btn-normal">查询</button>'+
            '<button type="button" onclick="addFriendTwo()" class="layui-btn layui-btn-normal">添加</button>'+
            '</div>' +
            '</center>'
        ,success: function(layero){

        }
    });
}


//添加朋友
function addFriendTwo() {

    var nickName = $("#nk").val();

    var relationship = $("#relationship option:selected").val();

    var applicantContext = $("#applicantContext").val();

    if(nickName==null || nickName ==""){
        layer.msg("请输入搜索昵称");
        return false;
    }

    if(applicantContext==null ||applicantContext==""){
        layer.msg("请输入审核信息");
        return false;
    }

    //调用ajax
    var settings = {
        "url": base_url+"/api/base?action=addFriend&friendName="+nickName+"&relationship="+relationship+"&applicantContext="+applicantContext,
        "method": "GET",
        "timeout": 0,
        "headers": {
            "token": token
        }
    };

    $(function () {
        $.ajax(settings).done(function (response) {
            console.log(response);
            if (response.code == 403) {
                layer.alert(response.message);
            } else if (response.code == 200) {
                layer.alert(response.message);
            }else{
                layer.alert("服务器开小差...");
            }
        });
    });
}

//查询朋友
function queryFiren() {

}


//好友PK
function pk(friendUserId) {
    //调用ajax
    var settings = {
        "url": base_url+"/api/base?action=simulationPK&twoUserId="+friendUserId,
        "method": "GET",
        "timeout": 0,
        "headers": {
            "token": token
        }
    };

    $(function () {
        $.ajax(settings).done(function (response) {
            console.log(response);
            if(response.code == 403){
                layer.alert(response.message);
            }else if(response.code == 200){
                console.log(response);
                var pkNum = response.data.pkNum;
                var result = response.data.pkInfo;
                layer.open({
                    type: 1
                    ,title: false //不显示标题栏
                    ,closeBtn: false
                    ,area: '800px;'
                    ,shade: 0.8
                    ,id: 'LAY_layuiproffafa' //设定一个id，防止重复弹出
                    ,btn: ['查看', '关闭']
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: '<div id="pkInfo" style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 600;">' +
                        '<div>总回合数:<span>&nbsp;&nbsp;'+pkNum+'</span></div><br/>'+
                        '<div id="pkInfos" style="width:680px;height: 300px;"></div>'+
                        '</div>'
                    ,success: function(layero){

                    }
                });

                $("#pkInfos").val("");

                for(var key in result){
                    $("#pkInfos").append('<span style="color: red;width: 480px;">'+result[key]+"</span><br/><br/>");
                }

            }else{
                layer.alert("服务器开小差...");
            }

        });
    })
}


//发邮件
function sendEmail(friendUserId) {

}

//聊天
function chat(friendUserId) {
    layer.open({
        type: 1
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: '800px;'
        ,shade: 0.8
        ,id: 'chat' //设定一个id，防止重复弹出
        ,btn: ['查看', '关闭']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div id="chats" style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; ">' +
            '<h3>聊天:</h3>'+
            //'<div id="chatText" style="width:680px;height: 300px; background-color: #B5FFF8">' +
            //'</div><br/>'+
            '<div  style="width:680px;height: 300px; background-color: #B5FFF8" class="lite-chatbox" id="chatInfo">'+
            '</div><br/>'+
            '<textarea id="sendChat" placeholder="请输入申请内容" class="layui-textarea"/><br/>' +
            '<div><button type="button" onclick="sendMsg('+friendUserId+')" class="layui-btn layui-btn-normal">发送</button></div>'+
            '</div>'
        ,success: function(layero){

        }
    });
}

function sendMsg(friendUserId) {
    var sendChat = $("#sendChat").val();

    if(sendChat=="" || sendChat==undefined){
        layer.msg("请输入内容");
        return false;
    }

    var item = localStorage.getItem(friendUserId);
    var split = item.split("*");

    $("#chatInfo").append('    <!-- cleft 左 -->\n' +
        '    <div class="cleft cmsg">\n' +
        '        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;" src="'+split[1]+'" />\n' +
        '        <span class="name">'+split[0]+'</span>\n' +
        '        <span class="content">这是什么什么鬼？</span>\n' +
        '    </div>\n' +
        '\n' +
        '    <!-- cright 右 -->\n' +
        '    <div class="cright cmsg">\n' +
        '        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="'+user.head_url+'" />\n' +
        '        <span class="name">'+user.nick_name+'</span>\n' +
        '        <span class="content">'+sendChat+'</span>\n' +
        '    </div>');
    //清空发送信息
    $("#sendChat").val("");
}

function ceshi22() {


    var imgSrc = "https://img0.baidu.com/it/u=4209368189,2268860795&fm=26&fmt=auto&gp=0.jpg";

    var errorMsg = '    <div class="tips">\n' +
        '        <span class="tips-danger">系统消息：左/右边长消息被管理员批判一番……</span>\n' +
        '    </div>';
    var msg =         '    <div class="cleft cmsg">\n' +
        '        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;" src="'+imgSrc+'" />\n' +
        '        <span class="name">杠精</span>\n' +
        '        <span class="content">不管你说啥我都是一句话！呵呵呵</span>\n' +
        '    </div>\n' ;

    var infoMsg = '\t<div class="tips">\n' +
        '        <span>Chenjunyu19 退出了聊天室并撩了你一把</span>\n' +
        '    </div>';
    $("#chatAll").append(errorMsg+msg+infoMsg);

}

function clearChartAll() {
    $("#chatAll").html("");
}

function sendMsgAll() {
    var sendChatAll = $("#sendChatAll").val();

    if(sendChatAll=="" || sendChatAll==undefined){
        layer.msg("请输入内容");
        return false;
    }



    websocket.send(sendChatAll+'*&'+user.nick_name+'*&'+user.head_url);

   /* $("#chatAll").append('' +
        '    <div class="tips">'+date+'</div>'+
        '    <div class="cright cmsg">\n' +
        '        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="'+user.head_url+'" />\n' +
        '        <span class="name">'+user.nick_name+'</span>\n' +
        '        <span class="content">'+sendChatAll+'</span>\n' +
        '    </div>');
*/
    $("#sendChatAll").val("");
    $("#chatAll").val("");
}

$('#message').bind('keypress',function(event){
    sendMsgAll()
});
